<template>
    <div id="id">
       <el-row :gutter="20">
           <el-col :span="8">
               <el-card class="box-card">
                   <div slot="header" class="clearfix">
                       <span>菜单</span>
                       <el-button   class="el-icon-delete menuStyle" style="margin-left:10px" plain type="danger" size="small" @click="deleteForm"> 删除</el-button>
                       <el-button   class="el-icon-edit menuStyle" plain type="primary" size="small" @click="Edit"> 编辑</el-button>
                       <el-popover
                               class="menuStyle"
                               placement="top-start"
                               width="170"
                               trigger="hover"
                               >
                           <el-button type="primary" plain size="small" @click="topLevel(0)">顶级</el-button>
                           <el-button type="primary" plain size="small" @click="topLevel(1)">子级</el-button>
                           <el-button slot="reference"  class="el-icon-plus menuStyle" plain type="success" size="small"> 添加</el-button>
                       </el-popover>
                   </div>
                   <el-tree highlight-current :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
               </el-card>
           </el-col>
           <el-col :span="16">
               <el-card class="box-card">
                   <div slot="header" class="clearfix">
                   </div>
                   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"  status-icon class="demo-ruleForm">
                       <el-form-item label="路径编码" prop="PathCode">
                           <el-input v-model="ruleForm.PathCode" :disabled="disabledFrom" placeholder="请输入路径编码"></el-input>
                       </el-form-item>
                       <el-form-item label="标题" prop="title">
                           <el-input v-model="ruleForm.title" :disabled="disabledFrom" placeholder="请输入标题"></el-input>
                       </el-form-item>
                       <el-form-item label="父级节点" prop="ParentNode">
                           <el-input v-model="ruleForm.ParentNode" :disabled="disabledFrom" placeholder="请输入父级节点"></el-input>
                       </el-form-item>
                       <el-form-item label="图标" prop="icon">
                           <el-input v-model="ruleForm.icon" :disabled="disabledFrom" placeholder="请输入图标编码"></el-input>
                       </el-form-item>
                       <el-form-item label="资源路径" prop="resourcePath">
                           <el-input v-model="ruleForm.resourcePath" :disabled="disabledFrom" placeholder="请输入资源路径"></el-input>
                       </el-form-item>
                       <el-form-item label="类型">
                           <el-select style="width:100%;" :disabled="disabledFrom" v-model="ruleForm.type" placeholder="请选择">
                               <el-option
                                       v-for="item in options"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value">
                               </el-option>
                           </el-select>
                       </el-form-item>
                       <el-form-item label="排序" prop="sort">
                           <el-input-number v-model="ruleForm.sort" :disabled="disabledFrom" controls-position="right" @change="handleChange" :min="0"></el-input-number>
                       </el-form-item>
                       <el-form-item label="描述" prop="describe">
                           <el-input v-model="ruleForm.describe" :disabled="disabledFrom" placeholder="请输入描述"></el-input>
                       </el-form-item>
                       <el-form-item label="前端组件" prop="frontComponents">
                           <el-input v-model="ruleForm.frontComponents" :disabled="disabledFrom" placeholder="请输入前端组件"></el-input>
                       </el-form-item>
                       <el-form-item v-if="bottomFrom">
                           <el-button v-if="dataStatus" type="primary" @click="submitForm('ruleForm',0)" class="el-icon-plus"> 添加</el-button>
                           <el-button v-else type="primary" @click="submitForm('ruleForm',1)" class="el-icon-edit"> 编辑</el-button>
                           <el-button @click.native="cancelClone" class="el-icon-close"> 取消</el-button>
                           <!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
                       </el-form-item>
                   </el-form>
               </el-card>
           </el-col>
       </el-row>
    </div>
</template>
<script>
    import { getMenu } from "@/api/menu";
    export default {
        data(){
            return {
                ruleForm:{
                    PathCode:'',  //路径编码
                    title:'',   //标题
                    ParentNode:'',  //父级节点
                    icon:'',   //图标
                    resourcePath:'',  //资源路径
                    type:'',  //类型
                    sort:'',  //排序
                    describe:'',  //描述
                },
                options:[
                    {
                        value:0,
                        label:'目录',
                    },
                    {
                        value:1,
                        label:'菜单',
                    }
                ],
                disabledFrom:true,  //表单的状态
                bottomFrom:false,  //添加和取消按钮的状态
                rules:{
                    PathCode:[
                        {
                            required:true,
                            message:'请输入路径编码',
                            trigger:'blur',
                        }
                    ],
                    title:[
                        {
                            required:true,
                            message:'请输入标题',
                            trigger:'blur',
                        }
                    ],
                    ParentNode:[
                        {
                            required:true,
                            message:'请输入父级节点',
                            trigger:'blur',
                        }
                    ],
                    icon:[
                        {
                            required:true,
                            message:'请输入图标',
                            trigger:'blur',
                        }
                    ],
                    resourcePath:[
                        {
                            required:true,
                            message:"请输入资源路径",
                            trigger:'blur',
                        }
                    ],
                    type:[
                        {
                            required:true,
                            message:"请输入类型",
                            trigger:'blur',
                        }
                    ],
                    sort:[
                        {
                            required:true,
                            message:"请输入排序",
                            trigger:'blur',
                        }
                    ],
                    describe:[
                        {
                    required:true,
                    message:"请输入描述",
                    trigger:'blur',
                        },
            ],
                    frontComponents:[
                {
                    required:true,
                    message:"请输入前端组件",
                    trigger:'blur',
                },
            ],

                },
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                dataId:'',
            }
        },
        methods:{
            handleNodeClick(data) {
                console.log(data);
                this.dataId = data.id;
                this.cancelClone(1);
            },
            deleteForm(){
                if(this.dataId){
                    this.$confirm('此操作将永久删除菜单, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getTreeData();
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }else{
                    this.$notify.info({
                        title:"提示",
                        message:"请选择删除的菜单!",
                    })
                }
            },
            submitForm(formName,val) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                      if(val===0){   //添加
                          this.cancelClone();
                          this.$notify.success({
                              title:"添加成功",
                              message:"",
                          })
                      }else {  //编辑
                          this.$notify.success({
                              title:"修改成功",
                              message:"",
                          })
                          this.cancelClone();
                      }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleChange(value) {
                // console.log(value);
            },
            cancelClone(val){
                this.disabledFrom = true;
                this.bottomFrom = false;
                this.resetForm('ruleForm');
                if(!val){
                    this.getTreeData();
                }
            },
            topLevel(val){
                if(val===0){  //添加顶级
                    this.dataId = '';  //清空点击树形结构获取的id值
                    this.addStatus();
                }else{    //添加子级
                    if(this.dataId){

                        this.addStatus();
                    }else {
                        this.$notify.info({
                            title:"提示",
                            message:"请选择添加的菜单",
                        })
                    }
                }
            },
            Edit(){
                if(this.dataId){
                    this.addStatus();
                    this.dataStatus = false;
                }else {
                    this.$notify.info({
                        title:"提示",
                        message:"请选择编辑的菜单",
                    })
                }
            },
            addStatus(){
                this.disabledFrom = false;
                this.dataStatus = true;
                this.bottomFrom = true;
                this.getTreeData();
            },
            getTreeData(){
                getMenu().then(response=>{
                    this.data = response.data;
                })
            }
        },
        created(){
            this.getTreeData();
        }
    }
</script>
<style scoped lang="scss">
    .menuStyle{
        float:right;
    }
    .clear{
        clear:both;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
    }
</style>